{% extends 'base.html' %}
{% load static %}
{% block content %}

<style>
    body {
        background: linear-gradient(to right, #f8f9fa, #e9ecef);
    }

    .card {
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        border: none;
    }

    .table thead th {
        background-color: #f1f3f6;
        color: #343a40;
        font-weight: bold;
    }

    .table td, .table th {
        vertical-align: middle !important;
    }

    .stat-card .card-body {
        padding: 1rem;
    }

    .stat-card h3 {
        margin-bottom: 0;
    }

    .progress {
        height: 5px;
    }

    .text-sm {
        font-size: 0.85rem;
    }






</style>

<div class="container py-4">
    <div class="row">
        <!-- 左侧管理员信息 -->
        <div class="col-lg-3 mb-4">
            <div class="card h-100 shadow-sm">
                <div class="card-body text-center">

<img src="{% static '头像.png' %}" alt="管理员头像" class="rounded-circle mb-3" width="100">

                    <h5>{{ request.user.username }}</h5>
                    <p class="text-muted mb-1">系统管理员</p>
                    <p class="text-muted mb-3">{{ request.user.email }}</p>
                    <hr class="my-3">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span>总用户数</span>
                            <span class="fw-bold">{{ total_users }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span>活跃用户</span>
                            <span class="fw-bold">{{ active_users }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span>今日登录</span>
                            <span class="fw-bold">{{ today_logins }}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 右侧内容区域 -->
        <div class="col-lg-9">
            <!-- 用户管理表格 -->
            <div class="card mb-4 shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">👥 用户管理</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead>
                            <tr>
                                <th scope="col">用户名</th>
                                <th scope="col">邮箱</th>
                                <th scope="col">角色</th>
                                <th scope="col">注册日期</th>
                                <th scope="col">状态</th>
                                <th scope="col">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for user in users %}
                            <tr>
                                <td>{{ user.username }}</td>
                                <td>{{ user.email }}</td>
                                <td>{{ user.get_role_display }}</td>
                                <td>{{ user.date_joined|date:"Y-m-d" }}</td>
                                <td>
                                    {% if user.is_active %}
                                    <span class="badge bg-success">活跃</span>
                                    {% else %}
                                    <span class="badge bg-warning">禁用</span>
                                    {% endif %}
                                </td>
                                <td>
                                   <a href="{% url 'user_profile_by_id' user.id %}" class="btn btn-sm btn-outline-primary">查看</a>
                                    <a href="{% url 'user_edit' user.id %}" class="btn btn-sm btn-outline-primary">编辑资料</a>

                                    <button class="btn btn-sm btn-outline-danger">删除</button>
                                </td>
                            </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>


            <!-- 系统统计卡片 -->
            <div class="card mb-4 shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">📊 系统统计</h5>
                </div>
                <div class="card-body">
                    <div class="row g-4">
                        <!-- 总加密操作 -->
                        <div class="col-md-4">
                            <div class="card bg-primary text-white h-100 stat-card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <p class="mb-1">总加密操作</p>
                                            <h3 class="mb-0">{{ total_encryptions }}</h3>
                                        </div>
                                        <i class="fas fa-lock fa-2x opacity-50"></i>
                                    </div>
                                    <div class="mt-3">
                                        <div class="progress" style="height: 5px;">
                                            <div class="progress-bar bg-white" role="progressbar"
                                                 style="width: {% widthratio recent_encryptions total_encryptions 100 %}%"
                                                 aria-valuenow="{% widthratio recent_encryptions total_encryptions 100 %}"
                                                 aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                        <p class="text-white-50 mt-1 text-sm">
                                            最近30天 {{ recent_encryptions }} 次
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 活跃用户 -->
                        <div class="col-md-4">
                            <div class="card bg-success text-white h-100 stat-card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <p class="mb-1">活跃用户</p>
                                            <h3 class="mb-0">{{ active_users }}</h3>
                                        </div>
                                        <i class="fas fa-users fa-2x opacity-50"></i>
                                    </div>
                                    <div class="mt-3">
                                        <div class="progress" style="height: 5px;">
                                            <div class="progress-bar bg-white" role="progressbar"
                                                 style="width: {% widthratio active_users total_users 100 %}%"
                                                 aria-valuenow="{% widthratio active_users total_users 100 %}"
                                                 aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                        <p class="text-white-50 mt-1 text-sm">
                                            占比 {% widthratio active_users total_users 100 %}%
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 数据加密条数统计 -->
                        <div class="col-md-4">
                            <div class="card bg-warning text-white h-100 stat-card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <p class="mb-1">数据加密条数</p>
                                            <h3 class="mb-0">{{ total_encryption_records }}</h3>
                                        </div>
                                        <i class="fas fa-lock fa-2x opacity-50"></i>
                                    </div>
                                    <div class="mt-3">
                                        <div class="progress" style="height: 5px;">
                                            <div class="progress-bar bg-white" role="progressbar"
                                                 style="width: {% widthratio recent_encryptions total_encryption_records 100 %}%"
                                                 aria-valuenow="{% widthratio recent_encryptions total_encryption_records 100 %}"
                                                 aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                        <p class="text-white-50 mt-1 text-sm">
                                            最近30天 {{ recent_encryptions }} 条
                                        </p>
                                        <p class="text-white-50 mt-1 text-sm">
                                            较上月增长 {{ growth_percentage|floatformat:"1" }}%
                                        </p>

                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
                        <!-- 新增：录入农产品信息 -->
            <div class="card mb-4 shadow-sm border-0">
                <div class="card-header bg-success text-white d-flex align-items-center justify-content-between">
                    <h5 class="mb-0">🌾 录入农产品信息</h5>
                    <span class="badge bg-light text-success">New</span>
                </div>
                <div class="card-body">
                    <div class="row align-items-center g-3">
                        <div class="col-md-8">
                            <p class="card-text mb-0">填写农产品来源、生产过程、检验批次、物流流转等信息。</p>
                        </div>
                        <div class="col-md-4 text-md-end">
                            <a href="{% url 'input_data' %}" class="btn btn-success w-100 mb-2">开始录入</a>
                            <a href="{% url 'agricultural_product_list' %}" class="btn btn-outline-secondary w-100">查看已录入信息</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 数据加密工具 -->
            <div class="card mb-4 shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">🔐 数据加密工具</h5>
                </div>
                <div class="card-body">
                    <div class="row g-4">
                        <!-- 文本加密卡片 -->
                        <div class="col-md-6">
                            <div class="card h-100 border-0 shadow-sm">
                                <div class="card-body">
                                    <h5 class="card-title">文本加密</h5>
                                    <p class="card-text">使用高级加密算法保护您的敏感文本信息。</p>
                                    <a href="{% url 'text_encrypt' %}" class="btn btn-primary mt-2">开始加密</a>
                                </div>
                            </div>
                        </div>

                        <!-- 历史记录卡片 -->
                        <div class="col-md-6">
                            <div class="card h-100 border-0 shadow-sm">
                                <div class="card-body">
                                    <h5 class="card-title">📜 历史上传记录</h5>
                                    <p class="card-text">查看您之前上传并加密过的文件记录。</p>
                                    <a href="{% url 'encryption_history' %}" class="btn btn-primary mt-2">查看记录</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 最近活动 -->
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">🕒 最近活动</h5>
                </div>
                <div class="card-body">
                    {% if recent_activities %}
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead>
                            <tr>
                                <th scope="col">时间</th>
                                <th scope="col">用户</th>
                                <th scope="col">操作</th>
                                <th scope="col">IP地址</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for activity in recent_activities %}
                            <tr>
                                <td>{{ activity.created_at|date:"Y-m-d H:i:s" }}</td>
                                <td>{{ activity.user}}</td>
                                <td>
                                    {% if activity.action == 'login' %}
                                    <span class="badge bg-success">{{ activity.get_action_display }}</span>
                                    {% elif activity.action == 'logout' %}
                                    <span class="badge bg-primary">{{ activity.get_action_display }}</span>
                                    {% elif activity.action == 'text_encrypt' %}
                                    <span class="badge bg-warning text-dark">{{ activity.get_action_display }}</span>
                                    {% elif activity.action == 'view_history' %}
                                    <span class="badge bg-secondary">{{ activity.get_action_display }}</span>
                                    {% elif activity.action == 'view_detail' %}
                                    <span class="badge bg-info text-dark">{{ activity.get_action_display }}</span>
                                    {% else %}
                                    <span class="badge bg-info text-white">{{ activity.get_action_display }}</span>
                                    {% endif %}
                                </td>
                                <td><code>{{ activity.ip_address }}</code></td>
                            </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <p class="text-muted text-center my-3">暂无活动记录。</p>
                    {% endif %}
                </div>
            </div>


        </div>
    </div>
</div>

{% endblock %}
